<template>
    <el-dialog
      title="添加演出厅"
      :visible.sync="addHallVisible"
      width="60%"
      :before-close="closeDialog"
      >
      <el-form ref="addHallFormRef"
      :model="addHallFrom"
      :rules="addHallFromRules"
      label-width="200px"
      :inline="true"
      label-position=center >
        <el-form-item label="演出厅名称" prop="hallName">
          <el-input v-model="addHallFrom.hallName"></el-input>
        </el-form-item>
        <el-form-item label="演出厅座位数量" prop="hallSeats">
          <el-input v-model="addHallFrom.hallSeats"></el-input>
        </el-form-item>
        <el-form-item label="演出厅占格（宽）" prop="hallWidth">
          <el-input v-model.number="addHallFrom.hallWidth"></el-input>
        </el-form-item>
        <el-form-item label="演出厅占格（高）" prop="hallHeight">
          <el-input v-model.number="addHallFrom.hallHeight"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="addhall()">确 定</el-button>
      </span>
    </el-dialog>
</template>

<script>
// 导入网络请求
import { postaddhall } from '../../../network/theaterManage'
export default {
  name: 'addHallDialog',
  data () {
    return {
      // 添加演出厅表单
      addHallFrom: {
        'hallName': '',
        'hallSeats': 0,
        'hallWidth': 0,
        'hallHeight': 0
      },
      // addhallfrom表单验证
      addHallFromRules: {
        hallName: [
          { required: true, message: '请输入演出厅名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        hallSeats: [
          { required: true, message: '请输入演出厅座位数量', trigger: 'blur' },
          { type: 'number', message: '输入的必须是数字' }
        ],
        hallWidth: [
          { required: true, message: '请输入演出厅宽', trigger: 'blur' },
          { type: 'number', message: '输入的必须是数字' }
        ],
        hallHeight: [
          { required: true, message: '请输入演出厅高', trigger: 'blur' },
          { type: 'number', message: '输入的必须是数字' }
        ]
      }
    }
  },
  props: {
    addHallVisible: {
      type: Boolean,
      default: false
    },
    theaterInfo: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    // 添加演出厅事件
    addhall () {
      console.log(this.theaterInfo.path)
      this.$refs.addHallFormRef.validate(valid => {
        if (valid) {
          postaddhall(this.theaterInfo.path, this.addHallFrom).then(res => {
            console.log(res)
            if (res.status === 200) {
              this.$message.success('添加演出厅成功')
              // 向父组件发送完成事件
              this.$emit('addHallComplete', res.data.theaterData)
            } else {
              this.$message.error('添加演出厅失败')
            }
          })
        }
      })
    },
    // 关闭对话框的操作
    closeDialog () {
      this.$emit('closeAddHallDialog')
      this.$refs.addHallFormRef.resetFields()
    }
  }
}
</script>

<style>

</style>
